import React from "react";
import styleModule from "@/style/echartCard.module.scss"
import { useState, useEffect } from "react";
import { adBarChart, colChart, funnelChart, lineChart, pieChart } from "@/utils/echarts";
import { useRef } from "react";
import { message } from "antd";
import { getRandomMath } from "@/utils/math";

const Echartcard = ({
    axisRotate,
    children, //children属性，如果有传模板进来，则echart图表块区域会换成传进来的模板，此时图表类型选择（即选择折线图还是扇形图等）会自动关闭掉。
    style = {},//内联样式传参，可以决定模块宽度占比%多少或者PX
    showPie = true,//是否显示扇形图
    showLine = true,//是否显示折线图
    showAdbar = true,//是否显示堆叠图
    showBar = true, //是否显示柱形图
    showFunnel = false,//是否显示漏斗图
    hideTypeBtn = false,//隐藏前面3个按钮
    hideDownBtn = false,//隐藏下载按钮
    hideTitle = false,
    defaultModule, //默认显示的模块 不传则为"pie" "bar" "adBar" "line"
    title = "图表卡",//模块标题
    showTimeBtn = true,//是否显示右上角时间切换按钮
    switchBtn = [],//右上角按钮名称
    data = [{
        "data": [
            {
                "value": getRandomMath(1000, 98884),
                "name": "随机数据1"
            },
            {
                "value": getRandomMath(1000, 98884),
                "name": "随机数据2"
            },
            {
                "value": getRandomMath(1000, 98884),
                "name": "随机数据3"
            }
        ]
    }],//传进来的数据数组
    pieType,//扇形图类型，默认不传是饼图，传2是环形图
    showLegend,//是否显示echart副标题，不传则为false
    margin,//echart图表的边距,默认值：["20px","20px","20px","20px"]
    useXis,//是否使用自己的横轴名称，不传则使用写死的
    area, //折线图是否显示阴影 不传则为false
    showDownBtn = true,//是否显示下载按钮
}) => {
    const [showModule, setShowModule] = useState(defaultModule || "bar");//默认显示分布图，bar则是条形图
    const [current, setCurrent] = useState(0);
    const [state, setState] = useState(null);


    // 监听传进来的和current变化 ，及时把新数据给到state
    useEffect(() => {
        if (children) {
            return;
        }
        if (data.length > 0 && current != null) {
            setState(data[current])
        }
    }, [current, data,children])

    const chartRef = useRef(null);//图表dom节点



    // state拿到后，看看显示的模块是啥，然后去显示数据
    useEffect(() => {
        if (children) {
            return;
        }
        switch (showModule) {
            case "pie": pieChart({
                event: chartRef.current,
                title: title,
                state: data[current],
                type: pieType,
                margin: margin,
                showLegend: showLegend,
                useXis: useXis
            }); break;
            case "bar": colChart({
                axisRotate: axisRotate,
                event: chartRef.current,
                state: data[current],
                margin: margin,
                showLegend: showLegend,
                useXis: useXis,
            }); break;
            case "adBar": adBarChart({
                axisRotate: axisRotate,
                event: chartRef.current,
                state: data[current],
                margin: margin,
                showLegend: showLegend,
                useXis: useXis
            }); break;
            case "line": lineChart({
                axisRotate: axisRotate,
                event: chartRef.current,
                state: data[current],
                useXis: useXis,
                margin: margin,
                showLegend: showLegend,
                area: area
            }); break;
            case "funnel": funnelChart({
                event: chartRef.current,
            }); break;
            default: console.log("none")
        }
    }, [state, current, showModule, title, pieType, margin, showLegend])



    return (
        <>
            <div className={styleModule.cardBox} style={{ ...style }}>
                <div className={styleModule.card}>
                    <div className={styleModule.header_container}>
                        <div className={styleModule.cardHead}>
                            {
                                !hideTitle ? <div className={styleModule.header_title}>
                                    <span className={styleModule.text}>
                                        {title}
                                    </span>
                                </div> : null
                            }
                            {showTimeBtn === false ? null : (<div className={styleModule.header_switch}>
                                {
                                    switchBtn.map((item, index) => {
                                        return (
                                            <span onClick={() => setCurrent(index)} className={styleModule.switch_btn} style={index === current ? { color: "white", backgroundColor: "dodgerblue" } : null} key={index}>{item}</span>
                                        )
                                    })
                                }
                            </div>)}
                        </div>
                    </div>

                    <div className={styleModule.smallBtn}>
                        {/* 选择图表类型按钮 */}
                        {
                            children ? null :
                                <div className={styleModule.smallBtn_item}>

                                    {
                                        showPie && !hideTypeBtn ?
                                            <span className={styleModule.btn_item} onClick={() => setShowModule("pie")} style={{ color: showModule === "pie" ? "dodgerblue" : null }}>扇形图</span>
                                            : null
                                    }
                                    {
                                        showLine && !hideTypeBtn ?
                                            <span className={styleModule.btn_item} onClick={() => setShowModule("line")} style={{ color: showModule === "line" ? "dodgerblue" : null }}>拆线图</span>
                                            : null
                                    }
                                    {
                                        showBar && !hideTypeBtn ?
                                            <span className={styleModule.btn_item} onClick={() => setShowModule("bar")} style={{ color: showModule === "bar" ? "dodgerblue" : null }}>柱形图</span>
                                            : null
                                    }
                                    {
                                        showAdbar && !hideTypeBtn ?
                                            <span className={styleModule.btn_item} onClick={() => setShowModule("adBar")} style={{ color: showModule === "adBar" ? "dodgerblue" : null }}>堆叠图</span>
                                            : null
                                    }
                                    {
                                        showFunnel && !hideTypeBtn ?
                                            <span className={styleModule.btn_item} onClick={() => setShowModule("funnel")} style={{ color: showModule === "funnel" ? "dodgerblue" : null }}>漏斗图</span>
                                            : null
                                    }
                                </div>
                        }
                        {/* 下载按钮 */}
                        <div className={styleModule.smallBtn_item}>
                            {
                                showDownBtn && !hideDownBtn ?
                                    <span className={styleModule.downBtn} onClick={() => message.success("已提交后台下载")}>下载</span>
                                    : null
                            }

                        </div>
                    </div>
                    {/* echart图表容器或者children模块 */}
                    {
                        children ?
                            <div className={styleModule.echartContainer}>{children}</div> : <div ref={chartRef} className={styleModule.echartContainer}></div>
                    }



                </div>
            </div>
        </>
    )
}
export default Echartcard